<template>
  <van-row class="conference_wrap">
    <header>
      <!-- <p class="shop_name">小汽车</p> -->
      <div class="head_wrap">
        <div class="head_icon">
          <img src="../../assets/images/head_icon.png" alt="" >
        </div>
        <div class="search_shop" @click="goSearch">
          <span>输入您想了解的车型</span>
          <van-icon name="search" class="search_icon" />
        </div>
      </div>
    </header>
    <div v-if="menus.length > 1" class="menus">
      <ul>
        <li v-for="(item, index) in menus" :key="index">
          <div>
            <div class="icon_menu">
              <i v-if="item.category_icon" :class="item.category_icon" class="iconfont icon_css" />
              <i v-else class="icon_css icon_text">{{ item.category_name }}</i>
            </div>
            <span class="text_menu">{{ item.category_name }}</span>
          </div>
        </li>
      </ul>
    </div>
    <article class="content">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        :offset="10"
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" class="sku_card">
          <van-image :src="handle_pic(item.cover_pic)" fit="cover" />
          <van-col span="24" class="card_bottom">
            <van-col span="16" class="introduce_left">
              <i class="iconfont icon-renwu zuozhe_style" /><span>{{ item.username }}</span>
              <span class="create_time">{{ item.create_time }}</span>
            </van-col>
            <van-col span="8" class="introduce_right">
              <i class="iconfont icon-liulan liulan_sty" /><span>{{
                item.view_num
              }}</span>
              <i
                :style="{ color: item.is_zan ? '#ee0a24' : '' }"
                class="iconfont icon-dianzan dianzan_sty"
                @click="zanAction(item, index)"
              /><span>{{ item.zan_num }}</span>
            </van-col>
          </van-col>
        </div>
      </van-list>
      <div v-if="list.length <= 0" class="no-data">
        <img :src="require('@/assets/images/empty.jpeg')" alt="">
        <div class="no-title">哎呦~还没有呢, 先去看看其他吧</div>
      </div>
    </article>
  </van-row>
</template>

<script>
import api from '@/api/car'
export default {
  data() {
    return {
      menus: [{ category_icon: 'icon-duosefuzhu-gengduotiaojian1', category_name: '更多' }],
      list: [],
      loading: false,
      finished: false,
      params: {
        page_num: 1,
        page_size: 10,
        type: 1
      }
    }
  },
  mounted() {
    this.getList()
    this.getCategoryList()
  },
  methods: {
    onLoad() {
      this.params.page_num++
      this.getList()
    },
    goSearch() {
      this.$router.push({ name: 'SearchList' })
    },
    zanAction(item, index) {
      if (item.is_zan) return
      const params = { article_id: item.article_id }
      api.zanAction(params).then((res) => {
        this.$toast.clear()
        if (parseInt(res.code) === 200) {
          this.list[index].zan_num += 1
          this.list[index].is_zan = true
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    handlePic(item) {
      return `${process.env.API_URL}/image/${item.item_pic}`
    },
    getCategoryList() {
      const params = { page_num: 1, page_size: 100 }
      api.categoryList(params).then((res) => {
        if (parseInt(res.code) === 200) {
          this.menus = [...res.result, ...this.menus]
        }
      })
    },
    getList() {
      this.$toast.loading({
        forbidClick: true,
        mask: false,
        duration: 0,
        message: '加载中...'
      })
      api.articleList(this.params).then((res) => {
        this.$toast.clear()
        if (parseInt(res.code) === 200) {
          this.list = [...this.list, ...res.result]
          if (this.params.page_size > res.result.length) {
            this.finished = true
          } else {
            this.finished = false
          }
        }
      })
        .catch(er => {
          this.$toast.clear()
          console.log(er)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.conference_wrap {
  padding-bottom: 67.5px;
  header {
    background: #fff;
    overflow: hidden;
    .shop_name {
      margin: 25px 0px 10px 0px;
      text-align: center;
      font-size: 20px;
      color: #303133;
      font-weight: 700;
    }
    .head_wrap {
      background: url("../../assets/images/bg_icon.jpeg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      overflow: hidden;
      text-align: center;
      padding: 25px 0;
      .head_icon {
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin: 7.5px auto 0px;
        }
      }
      .search_shop {
        background-color: rgba(255, 255, 255, .9);
        margin: 10px auto 15px;
        margin: 0 20px;
        height: 35px;
        text-align: left;
        padding: 0 10px;
        border-radius: 2.5px;
        color: rgba(0, 0, 0, .7);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search_icon{
          font-size: 20px;
        }
      }
    }
  }
  .menus {
    ul {
      padding-bottom: 11.5px;
      box-sizing: border-box;
      overflow: hidden;
      li {
        float: left;
        display: inline-block;
        width: 20%;
        text-align: center;
        .text_menu {
          color: #606266;
          display: inline-block;
          margin-top: 6.5px;
        }
        .icon_menu {
          width: 43px;
          height: 43px;
          line-height: 43px;
          margin: 11.5px auto 0;
          background: #ff6a6a;
          border-radius: 21.5px;
          color: #ffdfb3;
          font-size: 24px;
          .icon_css{
            font-style: normal;
            font-size: 24px;
          }
          .icon_text{
            font-size: 14px;
          }
        }
      }
    }
  }
  .content {
    overflow: hidden;
    padding: 0 15px 15px;
    .sku_card {
      overflow: hidden;
      width: 100%;
      margin-top: 15px;
      background: #fff;
      border-radius: 12.5px;
      box-shadow: 0px 4px 8px 4px rgba(240, 240, 240, 1);
      /deep/ img {
        border-radius: 12.5px 12.5px 0 0;
      }
      .card_bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        height: 30px;
        border-radius: 0 0 12.5px 12.5px;
        .introduce_left {
          color: #666;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .zuozhe_style {
            color: #999;
            font-size: 14px;
            margin: 0 5px 0 10px;
          }
          .create_time{
            margin-left:10px;
          }
        }
        .introduce_right {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 10px;
          .liulan_sty {
            color: #999;
            font-size: 10px;
            margin-right: 5px;
          }
          .dianzan_sty {
            color: #999;
            font-size: 12px;
            margin: 0 5px 0 10px;
          }
          span {
            color: #999;
            font-size: 12px;
          }
        }
      }
    }
    // .sku_card:first-child {
    //   margin-top: 15px;
    // }
    // .sku_card:last-child {
    //   margin-bottom: 15px;
    // }
    .no-data {
      width: 80%;
      margin: 0 auto;
      height: auto;
      img {
        width: 40%;
        margin: 30px auto 0;
        height: 100%;
        display: block;
      }
      .no-title {
        width: 100%;
        font-size: 14px;
        color: #999999;
        text-align: center;
      }
    }
  }
}
</style>
